/**
 * 动态提示测试页面
 */
import React, { useState } from 'react';
import { Card, Button, Input, Select, Space, Divider, Tag, Alert, Spin, message } from 'antd';
import { aiHintService } from '@/services/ai-hint.service';
import type { QuestionPurpose } from '@/types/brainstorm';

const { TextArea } = Input;

const HintsTest: React.FC = () => {
  const [topic, setTopic] = useState('人工智能在医疗诊断中的应用');
  const [purpose, setPurpose] = useState<QuestionPurpose>('audience');
  const [hints, setHints] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const purposes = [
    { value: 'audience', label: '目标读者' },
    { value: 'viewpoint', label: '核心观点' },
    { value: 'material', label: '素材收集' },
    { value: 'style', label: '写作风格' },
    { value: 'goal', label: '期望目标' },
  ];

  const handleGenerateHints = async () => {
    if (!topic.trim()) {
      message.warning('请输入主题');
      return;
    }

    setLoading(true);
    setError(null);
    setHints(null);

    try {
      const result = await aiHintService.generateDynamicHints({
        topic: topic.trim(),
        purpose,
      });

      setHints(result);
      message.success('提示生成成功！');
    } catch (err: any) {
      setError(err.message || '生成失败');
      message.error('生成失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleBatchGenerate = async () => {
    if (!topic.trim()) {
      message.warning('请输入主题');
      return;
    }

    setLoading(true);
    setError(null);
    setHints(null);

    try {
      const allPurposes: QuestionPurpose[] = ['audience', 'viewpoint', 'material', 'style', 'goal'];
      const results = await aiHintService.generateBatchHints(topic.trim(), allPurposes);

      setHints(results);
      message.success('批量生成成功！');
    } catch (err: any) {
      setError(err.message || '生成失败');
      message.error('生成失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: 24, maxWidth: 1200, margin: '0 auto' }}>
      <Card title="AI动态提示生成测试" style={{ marginBottom: 24 }}>
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              创作主题
            </label>
            <TextArea
              value={topic}
              onChange={(e) => setTopic(e.target.value)}
              placeholder="输入你的创作主题..."
              rows={3}
              maxLength={200}
              showCount
            />
          </div>

          <div>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              问题类型
            </label>
            <Select
              value={purpose}
              onChange={setPurpose}
              style={{ width: 200 }}
              options={purposes}
            />
          </div>

          <Space>
            <Button type="primary" onClick={handleGenerateHints} loading={loading}>
              生成单个提示
            </Button>
            <Button onClick={handleBatchGenerate} loading={loading}>
              批量生成所有提示
            </Button>
          </Space>
        </Space>
      </Card>

      {error && (
        <Alert
          message="错误"
          description={error}
          type="error"
          showIcon
          closable
          onClose={() => setError(null)}
          style={{ marginBottom: 24 }}
        />
      )}

      {loading && (
        <Card style={{ textAlign: 'center', padding: 48 }}>
          <Spin size="large" tip="正在生成智能提示..." />
        </Card>
      )}

      {hints && !loading && (
        <Card title="生成结果">
          {/* 单个结果 */}
          {hints.hints && (
            <Space direction="vertical" style={{ width: '100%' }} size="large">
              <div>
                <h4>💡 思考提示</h4>
                <Space wrap>
                  {hints.hints.map((hint: string, index: number) => (
                    <Tag key={index} color="blue" style={{ margin: 4, padding: '4px 12px' }}>
                      {hint}
                    </Tag>
                  ))}
                </Space>
              </div>

              <div>
                <h4>📝 参考示例</h4>
                <Space direction="vertical" style={{ width: '100%' }}>
                  {hints.examples.map((example: string, index: number) => (
                    <Card key={index} size="small" style={{ background: '#f0f7ff' }}>
                      <span style={{ color: '#1890ff', marginRight: 8 }}>
                        {index + 1}.
                      </span>
                      {example}
                    </Card>
                  ))}
                </Space>
              </div>

              <div>
                <h4>✨ 写作技巧</h4>
                <Space direction="vertical" style={{ width: '100%' }}>
                  {hints.tips.map((tip: string, index: number) => (
                    <Alert
                      key={index}
                      message={tip}
                      type="info"
                      showIcon={false}
                      style={{ background: '#fff7e6', border: '1px solid #ffd591' }}
                    />
                  ))}
                </Space>
              </div>
            </Space>
          )}

          {/* 批量结果 */}
          {!hints.hints && Object.keys(hints).length > 0 && (
            <Space direction="vertical" style={{ width: '100%' }} size="large">
              {Object.entries(hints).map(([purposeKey, data]: [string, any]) => (
                <Card
                  key={purposeKey}
                  type="inner"
                  title={
                    <span>
                      {purposes.find(p => p.value === purposeKey)?.label || purposeKey}
                    </span>
                  }
                >
                  <Space direction="vertical" style={{ width: '100%' }}>
                    <div>
                      <strong>提示：</strong>
                      <div style={{ marginTop: 8 }}>
                        {data.hints.map((hint: string, index: number) => (
                          <Tag key={index} style={{ margin: 4 }}>
                            {hint}
                          </Tag>
                        ))}
                      </div>
                    </div>

                    <Divider style={{ margin: '12px 0' }} />

                    <div>
                      <strong>示例：</strong>
                      <ol style={{ marginTop: 8, paddingLeft: 20 }}>
                        {data.examples.map((example: string, index: number) => (
                          <li key={index} style={{ marginBottom: 8 }}>
                            {example}
                          </li>
                        ))}
                      </ol>
                    </div>

                    <Divider style={{ margin: '12px 0' }} />

                    <div>
                      <strong>技巧：</strong>
                      <ul style={{ marginTop: 8, paddingLeft: 20 }}>
                        {data.tips.map((tip: string, index: number) => (
                          <li key={index} style={{ marginBottom: 8 }}>
                            {tip}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </Space>
                </Card>
              ))}
            </Space>
          )}
        </Card>
      )}
    </div>
  );
};

export default HintsTest;